<template>
    <div>
        <div>
            <div class="student-top" style="background-color:white;">
                <span>
                    <div class="student-logo"><img border="0" @click="home" src="https://www.ketangpai.com/images/common/logo_blue.png" width="128" height="32" align="top"/></div>
                    <a href="" target="_self" class="one" style="margin-right:610px;color:#4285f4;">我的课堂</a>
                    <a href="" target="_self"  class="one">Ai工作集</a>
                    <a href="" target="_self" class="one">
                        <span class="iconfont">&#xe620;</span>
                        论文查重
                    </a>
                    <a href="" target="_self" class="one">
                        <span class="iconfont">&#xe6aa;</span>
                        任务管理
                    </a>
                    <button style="border:none;position: absolute;top: 28px;background-color: white;">
                        <span class="iconfont" style=" font-size:23px;padding-top: 0px;">&#xe668;</span>
                    </button>
                    
                    <el-dropdown  trigger="click" style="margin-left: 30px;">
                          <el-avatar :size="40" style="margin-left: 20px;position: absolute;top :15.5px" icon="el-icon-user-solid" ></el-avatar>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item>
                                <span class="iconfont">&#xe674;</span>
                                开通VIP
                            </el-dropdown-item>
                            <el-dropdown-item> 
                                <span class="iconfont">&#xe611;</span>
                                机构用户认证
                            </el-dropdown-item>
                            <el-dropdown-item @click="person">
                                <span class="iconfont">&#xe656;</span>
                                个人设置
                            </el-dropdown-item>
                            <el-dropdown-item @click="returnLogin">
                                <span class="iconfont">&#xe60a;</span>
                                退出登录
                            </el-dropdown-item>
                          </el-dropdown-menu>
                            
                        </template>
                    </el-dropdown>
                </span>
            </div>
            <hr/>
        </div>
        <div class="course">
            <div v-if="isTopCourseVisible" class="topCourse">
                <div>
                    <span style="font-size:20px;color:#575a5b;">置顶课程</span>
                    <!-- <button class="createCourse" >十 加入课程</button> -->
                    <el-button type="primary" @click="joinCourseVisible=true" style=" float: right;">十 加入课程</el-button>
                     <!-- <el-dropdown trigger="click">
                      <button class="createCourse">十 加入课程</button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>加入课程</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                     </el-dropdown> -->
                </div>
                <div class="course-content">
                    <ul >
                        <li v-for="course in topCourse" :key="course.id" style="border-radius: 10px;width: 255px;">
                            <!-- 假设每个课程对象有一个 'id' 和一个 'name' 属性 -->
                            <div>
                              <div style="padding: 20px;" @click="toClass(course)">
                                <span style="font-size: 13px;">{{ course.academicYear }}&nbsp;{{course.semester}}</span>
                                <br/>
                                <p style="font-size: 20px;margin:6px 0px;">{{ course.courseName }}</p>
                                <span style="margin-top: 10px;font-size: 13px;">{{ course.clazz }}</span>
                                <p style="margin-top: 18px;margin-bottom: 0px;"><span class="iconfont" style="font-size: 14px;"> &#xe6dc;</span >&nbsp;&nbsp;加课码:{{ course.courseCode }}</p>
                              </div>
                              <hr/>
                              <div class="action" style="padding: 15px;padding-top: 40px;width: 222px;">
                                  <span class="course-type" v-if="course.type==1">教</span>
                                  <span class="course-type" v-if="course.type==0">学</span>
                                  <span class="course-type" v-if="course.type==2">助</span>
                                  <span @click="member(course.id)" v-if="course.type!=1" style="font-size: 13px;color: #5b5e61;cursor: pointer;">&nbsp;&nbsp;负责人:{{ course.actor}}</span>
                                  <span @click="member(course.id)" v-if="course.type==1" style="font-size: 13px;color: #5b5e61;cursor: pointer;">&nbsp;&nbsp;成员 {{ course.number}}人</span>                                  
                                  <a  href="#" @click="changeIsTop(course.id,course.isTop)" class="iconfont" style="text-decoration: none;color:#5b5e61;font-size: 13px;margin-left: 39px;">{{ !course.isTop?"取消置顶":"\ue704"+"&nbsp;&nbsp;置顶" }}</a>
                                  
                                  <!-- 如果是我学的 -->
                                  <el-dropdown v-if="course.type==0" trigger="click" style="float: right;">
                                    <span  class="iconfont" style="text-decoration: none;color: #5b5e61;font-size: 13px;margin-top: 5px;border-color:white;cursor: pointer;">&nbsp; &#xe637;</span>
                                    <template #dropdown>
                                      <el-dropdown-menu>
                                        <el-dropdown-item  @click="course.dialogOverflowVisible = true">退课</el-dropdown-item>
                                        
                                        <el-dropdown-item  @click="course.fileDialogVisible=true">归档</el-dropdown-item>
                                        
                                      </el-dropdown-menu>
                                    </template>
                                  </el-dropdown>
                                  <!-- 如果是我协助的 -->
                                   <el-dropdown v-if="course.type==2" trigger="click" style="float: right;">
                                    <span  class="iconfont" style="text-decoration: none;color: #5b5e61;font-size: 13px;margin-top: 5px;border-color:white;cursor: pointer;">&nbsp; &#xe637;</span>
                                    <template #dropdown>
                                      <el-dropdown-menu>
                                        <el-dropdown-item  @click="edit(course.id)">编辑</el-dropdown-item>
                                        <el-dropdown-item  @click="course.fileDialogVisible=true">归档管理</el-dropdown-item>
                                        
                                      </el-dropdown-menu>
                                    </template>
                                  </el-dropdown>
                                  
                                </div>
                                
                            </div>
                            <!-- 归档和退课的点击弹窗 -->
                                                       <el-dialog v-model="course.fileDialogVisible" title="要归档此课程吗" width="500" draggable overflow>
                              <span>你可以在</span><span style="color: #4285f4;">“课程-归档管理”</span><span>中查看此课程</span>
                              <br v-if="course.type==1"/>
                              <span style="color: #4285f4;" v-if="course.type==1">【归档全部】</span><span v-if="course.type==1">学生的课程也会一起被归档</span>
                              <br v-if="course.type==1"/>
                              <span style="color: #4285f4;" >【归档自己】</span><span >学生的课程不会被归档</span>
                              <template #footer>
                                <div class="dialog-footer">
                                  <el-button @click="course.fileDialogVisible = false">取消</el-button>
                                  <el-button type="primary" v-if="course.type==1" @click="changeIsPigeonholeAll(course.id);course.fileDialogVisible=false">归档全部</el-button>
                                  <el-button type="primary" @click="changeIsPigeonhole(course.id);course.fileDialogVisible=false">
                                    归档自己
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                            <el-dialog v-model="course.dialogOverflowVisible"  width="450" draggable overflow>
                              <template #header>
                                <span style="font-size: 16px;font-weight:bolder;margin-left: 10px;"><span style="color: #3c4043;">确定要退课</span><span style="color: #4285f4;">"{{ course.courseName }}"</span><span style="color:#3c4043;">?</span></span>
                                <el-divider style="margin: 10px 0px;"/>
                              </template>
                              <div style="margin-top: -13px;">
                                <span>您的这个课程的任何信息或评论将被永久删除</span>
                                <br/>
                                <span style="color:#ff941f;">警告：此操作无法撤销</span>
                                <el-input id="password" v-model="formData.password" type="password" />
                                <span v-if="errors.password" style="color: red;">{{ errors.password }}</span>
                              </div>
                              <template #footer>
                                <div class="dialog-footer" style="text-align: left;">
                                  <el-divider/>
                                  <span style="font-size: small;">忘记密码？可前往<span style="color: #4285f4;">账号设置</span><span>处设置</span></span>
                                  <el-button @click="course.dialogOverflowVisible = false" style="margin-left: 90px;">取消</el-button>
                                  <el-button type="primary" @click="dropCourse(course)">
                                    退课
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                        </li>
                        
                    </ul>
                </div>
                
            </div>
            <el-button v-if="isTopCourseVisible==false" type="primary"  style=" float: right;" @click="joinCourseVisible=true">十 加入课程</el-button>
            <!-- 加入课程表单 -->
             <el-dialog
              v-model="joinCourseVisible"
              title="加入课程"
              width="500"
              draggable
              overflow
            >
              <el-form
                  ref="ruleFormRef"
                  style="max-width: 600px"
                  :model="ruleForm"
                  :rules="rules"
                  status-icon
              >
                <el-form-item label="加课码" prop="courseWord">
                  <el-input type="text" v-model="ruleForm.courseWord" placeholder="请输入加课码" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="cancelJoinCourse()">取消</el-button>
                  <el-button type="primary" @click="joinCourse('ruleForm')">
                    确认
                  </el-button>
                </div>
              </template>
            </el-dialog>
            <!-- 我学的... -->
            <br/>
            <div style="margin-top: 40px;">
              <div class="course-sort">
                <a href="#" @click="changeLearn" :style="{color:courseLearnVisible?'#4285f4':'black'}">我学的</a>
                <a href="#" @click="changeAssistant" :style="{color:courseAssistantVisible?'#4285f4':'black'}">我协助的</a>
                <el-input 
                  style="width: 240px;border-radius: 20px;float: right;"
                  size="large"
                  placeholder="搜索我的课程"
                  suffix-icon="SearchIcon"
                />
                <el-button class="pigeonhole" style="float: right; padding: 19px 20px;margin-right: 30px;" @click="archiveManagementVisible=true">归档管理</el-button>
                <el-dialog
                  v-model="archiveManagementVisible"
                  width="800"
                  height="700"
                  draggable
                  overflow
                >
                  <template #title>
                    <span style="font-size: medium; font-weight: bold; color: #3c4043; margin-left: 10px;">归档课程</span>
                  </template>
                  <el-form
                    ref="archiveFormRef"
                    style="max-width: 800px;"
                    :model="archiveForm"
                    status-icon
                  >
                    <hr />
                    <div >
                      <div style="margin: 25px 0px; ">
                        <a
                      href="#"
                      style="font-size: 17px;"
                      :style="{ color: courseLearnArchiveVisible ? '#4285f4' : 'black' }"
                      @click="courseLearnArchiveVisible = true; courseAssistantArchiveVisible = false"
                      >
                        我学的({{ courseLearnArchiveTerms.length }})
                      </a>
                      <a
                      href="#"
                      style="font-size: 17px;"
                      :style="{ color: courseAssistantArchiveVisible ? '#4285f4' : 'black' }"
                      @click="courseAssistantArchiveVisible = true; courseLearnArchiveVisible = false"
                      >
                        我协助的({{ courseAssistArchiveTerms.length }})
                      </a>
                      <el-input
                      style="width: 240px; border-radius: 80px; height: 40px; margin-left: 200px;"
                      size="large"
                      placeholder="请输入内容"
                      suffix-icon="SearchIcon"
                      ></el-input>
                      </div>
                      <div v-if="courseLearnArchiveVisible" style="border-top:1px solid #dadce0;">
                        <div v-if="courseLearnArchiveTerms.length>0" style="display: flex;">
                          <div style="width: 250px;border-right:1px solid #dadce0 ;">
                            <div
                            v-for="term in courseLearnArchiveTerms"
                            :key="term"
                            @click="currentTerm = term"
                            :class="{ activeArchive: currentTerm === term }"
                            style="cursor: pointer;padding: 20px 60px 20px 20px;"
                            >
                              {{ term }}
                            </div>
                          </div>
                          <div style="flex: 1;padding: 20px 0px 0px 20px;" >
                            <div v-if="currentTerm">

                              <div v-for="course in courseLearnArchive[currentTerm]" :key="course.id" style="margin-bottom: 20px;">
                                <div style="border: 1px solid #dadce0;padding: 15px; height: 60px;">
                                  <div style="width: 100px;height: 60px;border: 1px solid #dadce0;float: left;">
                                    <span>{{course.type==1?'教':course.type==0?'学':'助'}}</span>
                                    <br/>
                                    <span>加课码 {{ course.courseCode }}</span>
                                  </div>
                                  <div style="float: left;margin-left: 20px;">
                                    <span style="font-size: small;">{{ course.courseName }}</span>
                                    <br/>
                                    <span style="margin-top: 40px;font-size: larger;">{{ course.clazz }}</span>
                                    <br/>
                                    <span style="margin-top: 40px;">成员人</span>
                                  </div>
                                  
                                  <el-dropdown trigger="click" style="float: right;">
                                    <span class="iconfont" style="float: right; background-color: white;border: none;cursor: pointer;">&#xe607;</span>
                                    <template #dropdown>
                                      <el-dropdown-item  @click=restoreLearn(course.id,course.isTop)>恢复</el-dropdown-item>
                                      <el-dropdown-item  @click="course.dialogOverflowVisible = true">退课</el-dropdown-item>
                                      
                                    </template>
                                  </el-dropdown>
                                  <el-dialog v-model="course.dialogOverflowVisible"  width="450" draggable overflow>
                              <template #header>
                                <span style="font-size: 16px;font-weight:bolder;margin-left: 10px;"><span style="color: #3c4043;">确定要退课</span><span style="color: #4285f4;">"{{ course.courseName }}"</span><span style="color:#3c4043;">?</span></span>
                                <el-divider style="margin: 10px 0px;"/>
                              </template>
                              <div style="margin-top: -13px;">
                                <span>您的这个课程的任何信息或评论将被永久删除</span>
                                <br/>
                                <span style="color:#ff941f;">警告：此操作无法撤销</span>
                                <el-input id="password" v-model="formData.password" type="password" />
                                <span v-if="errors.password" style="color: red;">{{ errors.password }}</span>
                              </div>
                              <template #footer>
                                <div class="dialog-footer" style="text-align: left;">
                                  <el-divider/>
                                  <span style="font-size: small;">忘记密码？可前往<span style="color: #4285f4;">账号设置</span><span>处设置</span></span>
                                  <el-button @click="course.dialogOverflowVisible = false" style="margin-left: 90px;">取消</el-button>
                                  <el-button type="primary" @click="dropCourse(course)">
                                    退课
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                        </div>
                        <div v-if="courseLearnArchiveTerms.length==0">
                            <img src="https://www.ketangpai.cn/img/img_empty.84d0931c.png" style="height: 184px;display: block;margin: 20px 170px 0px;"/>
                  <div style="text-align: center;">暂无数据</div>
                            </div>
                      </div>
                      
                      <div v-if="courseAssistantArchiveVisible" style="border-top:1px solid #dadce0;">
                      <!-- 你协助的课程内容 -->
                       <div v-if="courseAssistArchiveTerms.length>0" style="display: flex;">
                          <div style="width: 250px;border-right:1px solid #dadce0 ;">
                            <div
                            v-for="term in courseAssistArchiveTerms"
                            :key="term"
                            @click="currentTerm = term"
                            :class="{ activeArchive: currentTerm === term }"
                            style="cursor: pointer;padding: 20px 60px 20px 20px;"
                            >
                              {{ term }}
                            </div>
                          </div>
                          <div style="flex: 1;padding: 20px 0px 0px 20px;" >
                            <div v-if="currentTerm">
                              <div v-for="course in courseAssistArchive[currentTerm]" :key="course.id" style="margin-bottom: 20px;">
                                <div style="border: 1px solid #dadce0;padding: 15px; height: 60px;">
                                  <div style="width: 100px;height: 60px;border: 1px solid #dadce0;float: left;">
                                    <span>{{course.type==1?'教':course.type==0?'学':'助'}}</span>
                                    <br/>
                                    <span>加课码 {{ course.courseCode }}</span>
                                  </div>
                                  <div style="float: left;margin-left: 20px;">
                                    <span style="font-size: small;">{{ course.courseName }}</span>
                                    <br/>
                                    <span style="margin-top: 40px;font-size: larger;">{{ course.clazz }}</span>
                                    <br/>
                                    <span style="margin-top: 40px;">成员人</span>
                                  </div>

                                  <el-dropdown trigger="click" style="float: right;">
                                    <span class="iconfont" style="float: right; background-color: white;border: none;cursor: pointer;">&#xe607;</span>
                                    <template #dropdown>
                                      <el-dropdown-item  @click=restoreLearn(course.id,course.isTop)>恢复</el-dropdown-item>
                                      <el-dropdown-item  @click="course.dialogOverflowPigeonholeVisible = true">删除</el-dropdown-item>
                                    </template>
                                  </el-dropdown>
                                  <el-dialog v-model="course.dialogOverflowPigeonholeVisible"  width="450" draggable overflow>
                              <template #header>
                                <span style="font-size: 16px;font-weight:bolder;margin-left: 10px;"><span style="color: #3c4043;">确定要删除</span><span style="color: #4285f4;">"{{ course.courseName }}"</span><span style="color:#3c4043;">?</span></span>
                                <el-divider style="margin: 10px 0px;"/>
                              </template>
                              <div style="margin-top: -13px;">
                                <span>您的这个课程的任何信息或评论将被永久删除</span>
                                <br/>
                                <span style="color:#ff941f;">警告：此操作无法撤销</span>
                                <br/>
                                <span style="color: #4285f4;">提醒：已用课程数包含了“删除课程数”</span>
                                <el-input id="password" v-model="formData.password" type="password" />
                                <span v-if="errors.password" style="color: red;">{{ errors.password }}</span>
                              </div>
                              <template #footer>
                                <div class="dialog-footer" style="text-align: left;">
                                  <el-divider/>
                                  <span style="font-size: small;">忘记密码？可前往<span style="color: #4285f4;">账号设置</span><span>处设置</span></span>
                                  <el-button @click="course.dialogOverflowPigeonholeVisible = false" style="margin-left: 90px;">取消</el-button>
                                  <el-button type="primary" @click="deleteCourse(course)">
                                    删除
                                  </el-button>
                                </div>
                              </template>
                                      </el-dialog>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                        </div>
                        <div v-if="courseAssistArchiveTerms.length==0">
                            <img src="https://www.ketangpai.cn/img/img_empty.84d0931c.png" style="height: 184px;display: block;margin: 20px 170px 0px;"/>
                  <div style="text-align: center;">暂无数据</div>
                            </div>
                      </div>
                    </div>
                  </el-form>
                </el-dialog>
              </div>

              <!-- 我学的 -->
              <div v-if="courseLearnVisible"  >
                <el-collapse v-if="courseLearnTerms.length>0" v-model="activeName" @change="handleChange" style="margin-top: 30px;font-size: medium;border: none;">
                  <el-collapse-item v-for="term in courseLearnTerms" :key="term" :title="term" :name="term" :icon="CaretRight" style="border:  1px solid #dadce0;font-size: medium;margin-top: 20px;border-radius: 10px;padding-left: 10px;">
                    <div class="courseLearn-content">
                      <el-button type="primary" @click="courseLearn[term].dialogVisible = true">课堂排序</el-button>
                      <!-- 课堂排序弹窗 -->
                      <el-dialog
                        title="课堂排序"
                        v-model="courseLearn[term].dialogVisible"
                        width="50%"
                        :before-close="handleClose(term)">
                        <div>
                          <!-- 拖拽排序列表 -->
                          <draggable
                            v-model="courseLearn[term].courses"
                            item-key="term"
                            :move="checkMove"
                            ghost-class="ghost"
                            chosen-class="chosen-class"
                            animation="100"
                            @end="onEnd">
                            <template #item="{ element }">
                              <div style="border: 1px solid #dadce0;padding: 15px; height: 80px;margin-bottom: 10px;">
                                <div style="display: inline-flex;">
                                  <div style="width: 110px;height: 80px;border: 1px solid #dadce0;float: left;">
                                  <span>{{element.type==1?'教':element.type==0?'学':'助'}}</span>
                                  <br/>
                                  <br/>
                                  <span>加课码 {{ element.courseCode }}</span>
                                </div>
                                <br/>
                                <div style="float: left;margin-left: 20px;">
                                  <span style="font-size: small;">{{ element.courseName }}</span>
                                  <br/>
                                  <span style="margin-top: 40px;font-size: larger;">{{ element.clazz }}</span>
                                  <br/>
                                  <span style="margin-top: 40px;" >成员{{element.number}}人</span>
                                </div>
                                </div>
                              </div>
                            </template>
                          </draggable>
                        </div>
                        <template #footer>
                          <span class="dialog-footer">
                            <el-button @click="courseLearn[term].dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="courseLearn[term].dialogVisible=false">保存</el-button>
                          </span>
                        </template>
                      </el-dialog>
                    <ul >
                        <li v-for="course in courseLearn[term].courses" :key="course.id" style="border-radius: 10px;width: 255px;">
                            <!-- 假设每个课程对象有一个 'id' 和一个 'name' 属性 -->
                            <div >
                              <div style="padding: 20px;" @click="toClass(course)">
                                <span style="font-size: 13px;">{{ course.academicYear }}&nbsp;{{course.semester}}</span>
                                <br/>
                                <p style="font-size: 20px;margin:6px 0px;">{{ course.courseName }}</p>
                                <span style="margin-top: 10px;font-size: 13px;">{{ course.clazz }}</span>
                                <p style="margin-top: 18px;margin-bottom: 0px;"><span class="iconfont" style="font-size: 14px;"> &#xe6dc;</span >&nbsp;&nbsp;加课码:{{ course.courseCode }}</p>
                              </div>
                              <hr/>
                              <div class="action" style="padding: 15px;padding-top: 40px;width: 222px;">
                                  <span class="course-type" v-if="course.type==1">教</span>
                                  <span class="course-type" v-if="course.type==0">学</span>
                                  <span class="course-type" v-if="course.type==2">助</span>
                                  <span @click="member(course.id)" style="font-size: 13px;color: #5b5e61;">&nbsp;&nbsp;负责人:{{ course.actor}}</span>
                                  <a  href="#" @click="changeIsTop(course.id,course.isTop)" class="iconfont" style="text-decoration: none;color:#5b5e61;font-size: 13px;margin-left: 39px;">{{ !course.isTop?"取消置顶":"\ue704"+"&nbsp;&nbsp;置顶" }}</a>
                                  
                                  <el-dropdown trigger="click" style="float: right;">
                                    <span class="iconfont" style="text-decoration: none;color: #5b5e61;font-size: 13px;margin-top: 5px;border-color:white;cursor: pointer;">&nbsp; &#xe637;</span>
                                    <template #dropdown>
                                      <el-dropdown-menu>
                                        <el-dropdown-item  @click="course.dialogOverflowVisible = true">退课</el-dropdown-item>
                                        
                                        <el-dropdown-item  @click="course.fileDialogVisible=true">归档</el-dropdown-item>
                                        
                                      </el-dropdown-menu>
                                    </template>
                                  </el-dropdown>
                                  <!-- 归档和退课的点击弹窗 -->
                            <el-dialog v-model="course.fileDialogVisible" title="要归档此课程吗" width="500" draggable overflow>
                              <span>你可以在</span><span style="color: #4285f4;">“课程-归档管理”</span><span>中查看此课程</span>
                              <br v-if="course.type==1"/>
                              <span style="color: #4285f4;" v-if="course.type==1">【归档全部】</span><span v-if="course.type==1">学生的课程也会一起被归档</span>
                              <br v-if="course.type==1"/>
                              <span style="color: #4285f4;" >【归档自己】</span><span >学生的课程不会被归档</span>
                              <template #footer>
                                <div class="dialog-footer">
                                  <el-button @click="course.fileDialogVisible = false">取消</el-button>
                                  <el-button type="primary" v-if="course.type==1" @click="changeIsPigeonholeAll(course.id);course.fileDialogVisible=false">归档全部</el-button>
                                  <el-button type="primary" @click="changeIsPigeonhole(course.id);course.fileDialogVisible=false">
                                    归档自己
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                                </div>
                                
                            </div>
                            
                            <el-dialog v-model="course.dialogOverflowVisible"  width="450" draggable overflow>
                              <template #header>
                                <span style="font-size: 16px;font-weight:bolder;margin-left: 10px;"><span style="color: #3c4043;">确定要退课</span><span style="color: #4285f4;">"{{ course.courseName }}"</span><span style="color:#3c4043;">?</span></span>
                                <el-divider style="margin: 10px 0px;"/>
                              </template>
                              <div style="margin-top: -13px;">
                                <span>您的这个课程的任何信息或评论将被永久删除</span>
                                <br/>
                                <span style="color:#ff941f;">警告：此操作无法撤销</span>
                                <el-input id="password" v-model="formData.password" type="password" />
                                <span v-if="errors.password" style="color: red;">{{ errors.password }}</span>
                              </div>
                              <template #footer>
                                <div class="dialog-footer" style="text-align: left;">
                                  <el-divider/>
                                  <span style="font-size: small;">忘记密码？可前往<span style="color: #4285f4;">账号设置</span><span>处设置</span></span>
                                  <el-button @click="course.dialogOverflowVisible = false" style="margin-left:280px ;">取消</el-button>
                                  <el-button type="primary" @click="dropCourse(course)">
                                    退课
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                        </li>
                        
                    </ul>
                </div>
                
                  </el-collapse-item>
                </el-collapse>            
                <div v-if="courseLearnTerms.length==0">
                            <img src="https://www.ketangpai.cn/img/img_empty.84d0931c.png" style="height: 184px;display: block;margin: 50px 355px 0px 355px;"/>

                  <div style="text-align: center;">暂无数据</div>
                </div>    
              </div>
              <div v-if="courseAssistantVisible"  class="assistant-course" >
                <el-collapse v-if="courseAssistTerms.length>0" v-model="activeName" @change="handleChange" style="margin-top: 30px;font-size: medium;border: none;">
                  <el-collapse-item v-for="term in courseAssistTerms" :key="term" :title="term" :name="term" :icon="CaretRight" style="border:  1px solid #dadce0;font-size: medium;margin-top: 20px;border-radius: 10px;padding-left: 10px;">
                    <div class="courseLearn-content">
                      <el-button type="primary" @click="courseAssist[term].dialogVisible = true">课堂排序</el-button>
                      <!-- 课堂排序弹窗 -->
                      <el-dialog
                        title="课堂排序"
                        v-model="courseAssist[term].dialogVisible"
                        width="50%"
                        :before-close="handleClose(term)">
                        <div>
                          <!-- 拖拽排序列表 -->
                          <draggable
                            v-model="courseAssist[term].courses"
                            item-key="term"
                            :move="checkMove"
                            ghost-class="ghost"
                            chosen-class="chosen-class"
                            animation="100"
                            @end="onEnd">
                            <template #item="{ element }">
                              <div style="border: 1px solid #dadce0;padding: 15px; height: 80px;margin-bottom: 10px;">
                                <div style="display: inline-flex;">
                                  <div style="width: 100px;height: 80px;border: 1px solid #dadce0;float: left;">
                                  <span>{{element.type==1?'教':element.type==0?'学':'助'}}</span>
                                  <br/>
                                  <br/>
                                  <span>加课码 {{ element.courseCode }}</span>
                                </div>
                                <br/>
                                <div style="float: left;margin-left: 20px;">
                                  <span style="font-size: small;">{{ element.courseName }}</span>
                                  <br/>
                                  <span style="margin-top: 40px;font-size: larger;">{{ element.clazz }}</span>
                                  <br/>
                                  <span style="margin-top: 40px;" >成员{{element.number}}人</span>
                                </div>
                                </div>
                              </div>
                            </template>
                          </draggable>
                        </div>
                        <template #footer>
                          <span class="dialog-footer">
                            <el-button @click="courseAssist[term].dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="courseAssist[term].dialogVisible = false">保存</el-button>
                          </span>
                        </template>
                      </el-dialog>
                    <ul >
                        <li v-for="course in courseAssist[term].courses" :key="course.id" style="border-radius: 10px;width: 255px;">
                            <!-- 假设每个课程对象有一个 'id' 和一个 'name' 属性 -->
                            <div >
                              <div style="padding: 20px;" @click="toClass(course)">
                                <span style="font-size: 13px;">{{ course.academicYear }}&nbsp;{{course.semester}}</span>
                                <br/>
                                <p style="font-size: 20px;margin:6px 0px;">{{ course.courseName }}</p>
                                <span style="margin-top: 10px;font-size: 13px;">{{ course.clazz }}</span>
                                <p style="margin-top: 18px;margin-bottom: 0px;"><span class="iconfont" style="font-size: 14px;"> &#xe6dc;</span >&nbsp;&nbsp;加课码:{{ course.courseCode }}</p>
                              </div>
                              <hr/>
                              <div class="action" style="padding: 15px;padding-top: 40px;width: 222px;">
                                  <span class="course-type" v-if="course.type==1">教</span>
                                  <span class="course-type" v-if="course.type==0">学</span>
                                  <span class="course-type" v-if="course.type==2">助</span>
                                  <span @click="member(course.id)" style="font-size: 13px;color: #5b5e61;">&nbsp;&nbsp;负责人:{{ course.actor}}</span>
                                  <a  href="#" @click="changeIsTop(course.id,course.isTop)" class="iconfont" style="text-decoration: none;color:#5b5e61;font-size: 13px;margin-left: 39px;">{{ !course.isTop?"取消置顶":"\ue704"+"&nbsp;&nbsp;置顶" }}</a>
                                  
                                  <el-dropdown trigger="click" style="float: right;">
                                    <span class="iconfont" style="text-decoration: none;color: #5b5e61;font-size: 13px;margin-top: 5px;border-color:white;cursor: pointer;">&nbsp; &#xe637;</span>
                                    <template #dropdown>
                                      <el-dropdown-menu>
                                        <el-dropdown-item  @click="course.dialogOverflowVisible = true">退课</el-dropdown-item>
                                        
                                        <el-dropdown-item  @click="course.fileDialogVisible=true">归档</el-dropdown-item>
                                        
                                      </el-dropdown-menu>
                                    </template>
                                  </el-dropdown>
                                  <!-- 归档和退课的点击弹窗 -->
                            <el-dialog v-model="course.fileDialogVisible" title="要归档此课程吗" width="500" draggable overflow>
                              <span>你可以在</span><span style="color: #4285f4;">“课程-归档管理”</span><span>中查看此课程</span>
                              <br v-if="course.type==1"/>
                              <span style="color: #4285f4;" v-if="course.type==1">【归档全部】</span><span v-if="course.type==1">学生的课程也会一起被归档</span>
                              <br v-if="course.type==1"/>
                              <span style="color: #4285f4;" >【归档自己】</span><span >学生的课程不会被归档</span>
                              <template #footer>
                                <div class="dialog-footer">
                                  <el-button @click="course.fileDialogVisible = false">取消</el-button>
                                  <el-button type="primary" v-if="course.type==1" @click="changeIsPigeonholeAll(course.id);course.fileDialogVisible=false">归档全部</el-button>
                                  <el-button type="primary" @click="changeIsPigeonhole(course.id);course.fileDialogVisible=false">
                                    归档自己
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                                </div>
                                
                            </div>
                            
                            <el-dialog v-model="course.dialogOverflowVisible"  width="450" draggable overflow>
                              <template #header>
                                <span style="font-size: 16px;font-weight:bolder;margin-left: 10px;"><span style="color: #3c4043;">确定要退课</span><span style="color: #4285f4;">"{{ course.courseName }}"</span><span style="color:#3c4043;">?</span></span>
                                <el-divider style="margin: 10px 0px;"/>
                              </template>
                              <div style="margin-top: -13px;">
                                <span>您的这个课程的任何信息或评论将被永久删除</span>
                                <br/>
                                <span style="color:#ff941f;">警告：此操作无法撤销</span>
                                <el-input id="password" v-model="formData.password" type="password" />
                                <span v-if="errors.password" style="color: red;">{{ errors.password }}</span>
                              </div>
                              <template #footer>
                                <div class="dialog-footer" style="text-align: left;">
                                  <el-divider/>
                                  <span style="font-size: small;">忘记密码？可前往<span style="color: #4285f4;">账号设置</span><span>处设置</span></span>
                                  <el-button @click="course.dialogOverflowVisible = false" style="margin-left:280px ;">取消</el-button>
                                  <el-button type="primary" @click="dropCourse(course)">
                                    退课
                                  </el-button>
                                </div>
                              </template>
                            </el-dialog>
                        </li>
                        
                    </ul>
                </div>
                
                  </el-collapse-item>
                </el-collapse>  
                <div v-if="courseAssistTerms.length === 0">
                      <img src="https://www.ketangpai.cn/img/img_empty.84d0931c.png" style="height: 184px;display: block;margin: 50px 355px 0px 355px;"/>

                  <div style="text-align: center;">暂无数据</div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import { useRouter } from 'vue-router';
import { ref, onMounted, computed,watch } from 'vue';
import Storage from '../../utils/storage.js';
import { post } from '../../utils/request';
import draggable from 'vuedraggable';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
  name: 'StudentPage',
  components: {
    draggable
  },
  setup() {
    const formData = ref({
      password: ''
    });
    const router = useRouter();
    let isElementVisible = ref(false); // 默认不显示
    let isActionVisible = ref(false); // 默认不显示
    let isTopCourseVisible = ref(true); // 默认显示
    const fileDialogVisible = ref(false);
    const dialogOverflowVisible = ref(false);
    let archiveManagementVisible = ref(false);
    const show = () => {
      isElementVisible.value = !isElementVisible.value; // 切换显示状态
    };
    const showAction = () => {
      isActionVisible.value = !isActionVisible.value;
    };
    const topCourse = ref([]); // 使用 ref 创建响应式数组
    const courseLearnTerms = ref([]);//我学的
    const courseAssistTerms = ref([]);
    const topCourses = async () => {
      try {
        const response = await post('/userCourse/topList', Storage.getSession("user"));
        console.log(response.data);
        if (Array.isArray(response.data)) {
          topCourse.value = response.data
            .filter(course => course.type != 1) // 过滤掉 type === 1 的 course
            .map(course => ({
              ...course,
              dialogOverflowVisible: false, // 添加的新属性
              fileDialogVisible: false // 添加的另一个新属性
            }));
          console.log(topCourse)
          if (topCourse.value.length != 0) {
            isTopCourseVisible.value = true;
          } else {
            isTopCourseVisible.value = false;
          }
        } else {
          topCourse.value = [];
          isTopCourseVisible.value = false;
        }
      } catch (error) {
        console.error('Error fetching top courses:', error);
      }
    };

    const returnLogin = () => {
      ElMessageBox.confirm(
        '确定要退出登录？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          try {
            Storage.removeSession("user");
            router.push('/login');
            ElMessage({
              type: 'success',
              message: '退出成功',
            })
          } catch (e) {
            console.log(e);
          }
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        });

    };

    const changeIsTop = async (courseId, isTop) => {
      try {
        const response = await post('/userCourse/update', {
          userId: Storage.getSession("user").id,
          courseId: courseId,
          isTop: isTop === 1 ? 0 : 1,
          isPigeonhole: 1,
        });
        topCourses();
        courseLearn();
        console.log(response);
      } catch (error) {
        console.log(error);
      }
    };

    // 使用 computed 来存储表单错误信息
    const errors = computed(() => {
      const result = {};
      if (formData.value.password === '') {
        result.password = '请输入密码';
      }
      return result;
    });

    const dropCourse = async (course) => {
      try {
        const user = Storage.getSession("user");
        console.log(course.id);
        console.log(user.id);
        console.log(formData.value.password);
        const dropCourseParam = {
          userId: user.id,
          courseId: course.id,
          password: formData.value.password
        };
        const response = await post('/userCourse/deleteCourse', dropCourseParam);
        course.fileDialogVisible = false; // 直接修改课程对象的属性
        course.dialogOverflowVisible = false; // 直接修改课程对象的属性
        topCourses();
        topCourses();
        getCourseAssist();
        getCourseLearn();
        getPigeonholeCourseAssist();
        getPigeonholeCourseLearn();
        console.log(response);
      } catch (error) {
        console.log(error);
      }
    }

    //归档
    const changeIsPigeonhole = async (param) => {
      try {
        const response = await post('/userCourse/update', {
          userId: Storage.getSession("user").id,
          courseId: param,
          isTop: 1,
          isPigeonhole: 0,
        });
        console.log(response);
        topCourses();
        joinCourseVisible.value = false;
        window.location.reload();

      } catch (error) {
        console.log(error);
      }
    };
    //归档全部
    const changeIsPigeonholeAll = async (courseId) => {
      console.log(courseId);

      try {
        const response = await post('/userCourse/changeAll', courseId);
        console.log(response);
        getCourseAssist();
        getCourseLearn();
        topCourses()

      } catch (e) {
        console.log(e);
      }
    }
    //加入课程
    let joinCourseVisible = ref(false);
    const ruleForm = ref({
      courseWord: ""
    })
    const ruleFormRef = ref();
    const validateWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入加课码"));
      } else {
        callback();
      }
    };
    const rules = ref({
      courseWord: [
        { validator: validateWord, trigger: 'blur' }
      ]
    });
    const validate = async () => {
      return new Promise((resolve) => {
        if (ruleFormRef.value) {
          ruleFormRef.value.validate((valid) => {
            resolve(valid);
          });
        } else {
          resolve(false);
        }
      });
    };
    const cancelJoinCourse = () => {
      joinCourseVisible.value = false;
      ruleFormRef.value.resetFields(); // 使用 ref 引用来调用 resetFields
    }
    const joinCourse = async () => {
      const valid = await validate();
      if (valid) {
        try {
          const user = Storage.getSession("user");
          const response = await post('/userCourse/join', {
            userId: user.id,
            courseCode: ruleForm.value.courseWord
          })
          console.log(response); // 或者根据需要处理 response
          joinCourseVisible.value = false;
          ruleFormRef.value.resetFields(); // 使用 ref 引用来调用 resetFields
          topCourses()
          getCourseLearn();
        } catch (e) {
          cancelJoinCourse();
          console.log(e);
        }
      }
    }

    //我学的
    const courseLearn = ref([]);
    let courseLearnVisible = ref(true);//我学的

    const courseAssist = ref([]);
    let courseAssistantVisible = ref(false);//我协助的课程
    const changeLearn = () => {
      courseLearnVisible.value = true;
      getCourseLearn();
      courseAssistantVisible.value = false;
    }
    const changeAssistant = () => {
      getCourseAssist();
      courseLearnVisible.value = false;
      courseAssistantVisible.value = true;

    }
    //获取我学的课程
    // const getCourseLearn = async () => {
    //   try {
    //     const user = Storage.getSession("user");
    //     const response = await post('/userCourse/getCourseByType', {
    //       userId: user.id,
    //       type:0
    //     })
    //     console.log(response)
    //     // 提取所有学期的课程数据
    //     const allCourses = Object.values(response.data).flat(); // 使用 flat() 将多维数组展平

    //     // 处理每个课程对象，添加新属性
    //     const processedCourses = allCourses.map(course => ({
    //       ...course,
    //       dialogOverflowVisible: false,
    //       fileDialogVisible: false
    //     }));


    //     // 将课程数据按学期分类
    //     const coursesByTerm = {};
    //     processedCourses.forEach(course => {
    //       const term = course.academicYear+" "+course.semester; // 假设课程对象的 id 属性就是学期名称
    //       if (!coursesByTerm[term]) {
    //         coursesByTerm[term] = [];
    //       }
    //       coursesByTerm[term].push(course);
    //     });

    //     // 将分类后的数据存储到 courseLearn.value
    //     courseLearn.value = coursesByTerm;

    //     courseLearnTerms.value = Object.keys(courseLearn.value); // 获取所有学期的键名
    //     console.log(courseLearnTerms.value)
    //     console.log(courseLearn.value);
    //   } catch (e) {
    //     console.log(e);
    //   }

    // }
    const getCourseLearn = async () => {
      try {
        const user = Storage.getSession("user");
        const response = await post('/userCourse/getCourseByType', {
          userId: user.id,
          type: 0
        });
        console.log(response);

        if (!response.data || Object.values(response.data).length === 0) {
          courseLearn.value = {}; // 初始化为空对象
          courseLearnTerms.value = []; // 初始化为空数组
        } else {
          // 提取所有学期的课程数据
          const allCourses = Object.values(response.data).flat(); // 使用 flat() 将多维数组展平

          // 处理每个课程对象，添加新属性
          const processedCourses = allCourses.map(course => ({
            ...course,
            dialogOverflowVisible: false,
            fileDialogVisible: false
          }));

          // 将课程数据按学期分类
          const coursesByTerm = {};
          processedCourses.forEach(course => {
            const term = course.academicYear + " " + course.semester; // 假设课程对象的 id 属性就是学期名称
            if (!coursesByTerm[term]) {
              coursesByTerm[term] = {
                courses: [], // 存储课程列表
                dialogVisible: false // 新增属性
              };
            }
            coursesByTerm[term].courses.push(course);
          });

          // 将分类后的数据存储到 courseLearn.value
          courseLearn.value = coursesByTerm;

          // 获取所有学期的键名
          courseLearnTerms.value = Object.keys(courseLearn.value);
          console.log(courseLearnTerms);
          console.log(courseLearn.value);
        }
      } catch (e) {
        console.error(e);
      }
    };
    //获取我协助的课程
    // const getCourseAssist = async () => {
    //   try {
    //     const user = Storage.getSession("user");
    //     const response = await post('/userCourse/getCourseByType', {
    //       userId: user.id,
    //       type:2
    //     })
    //     console.log(response.data);

    //     if (response.data && typeof response.data === 'object' && Object.values(response.data).length === 0) {
    //       courseAssistTerms.value = [];
    //       console.log(courseAssistTerms.value)
    //       courseAssist.value = [];
    //     } else {
    //       // 提取所有学期的课程数据
    //       const allAssistCourses = Object.values(response.data).flat(); // 使用 flat() 将多维数组展平

    //       // 处理每个课程对象，添加新属性
    //       const processedAssistCourses = allAssistCourses.map(course => ({
    //         ...course,
    //         dialogOverflowVisible: false,
    //         fileDialogVisible: false
    //       }));


    //       // 将课程数据按学期分类
    //       const coursesByTerm = {};
    //       processedAssistCourses.forEach(course => {
    //         const term = course.academicYear+" "+course.semester; // 假设课程对象的 id 属性就是学期名称
    //         if (!coursesByTerm[term]) {
    //           coursesByTerm[term] = [];
    //         }
    //         coursesByTerm[term].push(course);
    //       });
    //       courseAssist.value = coursesByTerm;
    //       courseAssistTerms.value = Object.keys(courseAssist.value); // 获取我协助的所有学期的键名
    //       console.log(courseAssistTerms.value.length)

    //     }
    //   } catch (e) {
    //     console.log(e);
    //   }
    // }
    const getCourseAssist = async () => {
      try {
        const user = Storage.getSession("user");
        const response = await post('/userCourse/getCourseByType', {
          userId: user.id,
          type: 2
        });
        console.log(response.data);

        if (response.data && typeof response.data === 'object' && Object.values(response.data).length === 0) {
          courseAssistTerms.value = []; // 初始化为空对象
          courseAssist.value = {};
        } else {
          // 提取所有学期的课程数据
          const allAssistCourses = Object.values(response.data).flat(); // 使用 flat() 将多维数组展平

          // 处理每个课程对象，添加新属性
          const processedAssistCourses = allAssistCourses.map(course => ({
            ...course,
            dialogOverflowVisible: false,
            fileDialogVisible: false
          }));

          // 将课程数据按学期分类
          const coursesByTerm = {};
          processedAssistCourses.forEach(course => {
            const term = course.academicYear + " " + course.semester; // 假设课程对象的 id 属性就是学期名称
            if (!coursesByTerm[term]) {
              coursesByTerm[term] = {
                courses: [], // 存储课程列表
                dialogVisible: false // 新增属性
              };
            }
            coursesByTerm[term].courses.push(course);
          });

          courseAssist.value = coursesByTerm;
          courseAssistTerms.value = Object.keys(courseAssist.value); // 获取我协助的所有学期的键名
          console.log(courseAssistTerms.value);
        }
      } catch (e) {
        console.log(e);
      }
    };
    // 使用 onMounted 钩子在组件挂载后调用 topCourses 方法
    onMounted(() => {
      topCourses();
      getCourseLearn();
      getCourseAssist();
      getPigeonholeCourseLearn();
      getPigeonholeCourseAssist()
      console.log(topCourse);
    });
    const activeName = ref('1')
    const handleChange = (value) => {
      console.log(value)
    }

    //归档管理
    const courseAssistantArchiveVisible = ref(false);
    const courseLearnArchiveVisible = ref(true);
    const currentTerm = ref(null);
    const courseLearnArchiveTerms = ref([]);
    const courseAssistArchiveTerms = ref([]);
    const courseLearnArchive = ref({});
    const courseAssistArchive = ref({});
    watch(archiveManagementVisible, (newVal) => {
      if (newVal) {
        // 弹窗打开时，设置当前选中的 term 为第一个 term
        if (courseLearnArchiveTerms.value.length > 0) {
          currentTerm.value = courseLearnArchiveTerms.value[0];
        }
      }
    });
    //获取归档课程
    //我学的
    const getPigeonholeCourseLearn = async () => {
      try {
        const user = Storage.getSession("user");
        const response = await post('/userCourse/getPigeonholeCourse', {
          userId: user.id,
          type: 0
        })
        console.log(response)
        // 提取所有学期的课程数据
        const allCourses = Object.values(response.data).flat(); // 使用 flat() 将多维数组展平

        // 处理每个课程对象，添加新属性
        const processedCourses = allCourses.map(course => ({
          ...course,
          dialogOverflowVisible: false,
          dialogOverflowPigeonholeVisible: false,
          fileDialogVisible: false
        }));


        // 将课程数据按学期分类
        const coursesByTerm = {};
        processedCourses.forEach(course => {
          const term = course.academicYear + " " + course.semester; // 假设课程对象的 id 属性就是学期名称
          if (!coursesByTerm[term]) {
            coursesByTerm[term] = [];
          }
          coursesByTerm[term].push(course);
        });

        // 将分类后的数据存储到 courseLearn.value
        courseLearnArchive.value = coursesByTerm;

        courseLearnArchiveTerms.value = Object.keys(courseLearnArchive.value); // 获取所有学期的键名
        console.log(courseLearnArchiveTerms.value)
        console.log(courseLearnArchive.value);
      } catch (e) {
        console.log(e);
      }
    }
    //我协助的.
    const getPigeonholeCourseAssist = async () => {
      try {
        const user = Storage.getSession("user");
        const response = await post('/userCourse/getPigeonholeCourse', {
          userId: user.id,
          type: 2
        })
        console.log(response)
        // 提取所有学期的课程数据
        const allCourses = Object.values(response.data).flat(); // 使用 flat() 将多维数组展平

        // 处理每个课程对象，添加新属性
        const processedCourses = allCourses.map(course => ({
          ...course,
          dialogOverflowVisible: false,
          dialogOverflowPigeonholeVisible: false,
          fileDialogVisible: false
        }));


        // 将课程数据按学期分类
        const coursesByTerm = {};
        processedCourses.forEach(course => {
          const term = course.academicYear + " " + course.semester; // 假设课程对象的 id 属性就是学期名称
          if (!coursesByTerm[term]) {
            coursesByTerm[term] = [];
          }
          coursesByTerm[term].push(course);
        });

        // 将分类后的数据存储到 courseAssistArchive.value
        courseAssistArchive.value = coursesByTerm;

        courseAssistArchiveTerms.value = Object.keys(courseAssistArchive.value); // 获取所有学期的键名
        console.log(courseAssistArchiveTerms.value)
        console.log(courseAssistArchive.value);
      } catch (e) {
        console.log(e);
      }
    }
    const archiveForm = ref({

    })
    const archiveFormRef = ref()
    const archiveManage = () => {

    }
    //恢复我学的
    const restoreLearn = async (param, flag) => {
      try {
        console.log("param：" + param)
        const response = await post('/userCourse/update', {
          userId: Storage.getSession("user").id,
          courseId: param,
          isTop: flag,
          isPigeonhole: 1,
        });
        console.log(response);
        topCourses();
        getCourseAssist();
        getCourseLearn();
        getPigeonholeCourseAssist();
        getPigeonholeCourseLearn();
        archiveManagementVisible.value = false;

      } catch (error) {
        console.log(error);
      }
    };
    //删除
    //删除
    const deleteCourse = async (course) => {
      try {
        const deleteCourseParam = {
          userId: Storage.getSession("user").id,
          courseId: course.id,
          password: formData.value.password
        };
        const response = await post("/course/delete", deleteCourseParam);
        console.log(response);
        window.location.reload();

      } catch (e) {
        console.log(e);
      }
    };
    const member = async (courseId) => {
      try {
        console.log(courseId)
        const response = await post(`/course/getById?courseId=${courseId}`);
        console.log(response.data);
        Storage.setSession('currentCourseMember', response.data);
        router.push('/member')
        // 处理响应数据
      } catch (error) {
        console.error('请求失败:', error.message);
        // 处理错误，例如显示错误消息
      }
    };
    const person = () => {
      router.push("/userSetting")
    };
    const toClass = (param) => {
      console.log(param)
      Storage.setSession("currentCourseMember", param)
      router.push('/classContent');
    }
    //课堂排序
    const dialogVisible = ref(false); // 控制弹窗显示
    // 检查是否允许移动
    const checkMove = (e) => {
      const { draggedContext, relatedContext } = e;
      if (draggedContext.element.disableSort || relatedContext.element?.disableSort) {
        return false; // 禁止拖拽
      }
      return true;
    };


    // 拖拽结束时的处理
    const onEnd = (e) => {
      console.log('拖拽结束，新顺序：', e.value);
    };

    // 保存排序结果
    const saveOrder = () => {
      console.log('保存排序结果：');
      dialogVisible.value = false; // 关闭弹窗
    };

    // 关闭弹窗
    const handleClose = () => {
      dialogVisible.value = false;
    };
    //编辑
    const edit = async (courseId) => {
      try {
        console.log(courseId)
        const response = await post(`/course/getById?courseId=${courseId}`);
        console.log(response.data);
        Storage.setSession('currentCourseMember', response.data);
        router.push('/classSetting')
        // 处理响应数据
      } catch (error) {
        console.error('请求失败:', error.message);
        // 处理错误，例如显示错误消息
      }
    };
    return {
      isElementVisible,
      show,
      returnLogin,
      topCourses,
      isTopCourseVisible,
      topCourse,
      changeIsTop,
      isActionVisible,
      showAction,
      changeIsPigeonhole,
      dropCourse,
      fileDialogVisible,
      dialogOverflowVisible,
      formData,
      errors,
      joinCourse,
      ruleForm,
      ruleFormRef,
      rules,
      validateWord,
      joinCourseVisible,
      validate,
      getCourseLearn,
      courseLearn,
      courseLearnVisible,
      courseAssistantVisible,
      changeAssistant,
      changeLearn,
      courseLearnTerms,
      courseAssistTerms,
      activeName,
      handleChange,
      archiveManage,
      archiveManagementVisible,
      archiveForm,
      archiveFormRef,
      courseAssist,
      getCourseAssist,
      courseAssistantArchiveVisible,
      courseLearnArchiveVisible,
      currentTerm,
      restoreLearn,
      courseAssistArchiveTerms,
      courseLearnArchiveTerms,
      courseAssistArchive,
      courseLearnArchive,
      getPigeonholeCourseLearn,
      getPigeonholeCourseAssist,
      deleteCourse,
      member,
      person,
      dialogVisible,
      checkMove,
      onEnd,
      saveOrder,
      handleClose,
      toClass,
      changeIsPigeonholeAll,
      edit,
      cancelJoinCourse
    };
  }
};
</script>
<style>
.student-logo{
    padding: 15px;
    margin-right: 10px;
    background-color: white;
    float: left;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.student-top{
    width: 100%;
}
.dropbtn {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.dropdown {
  display: inline-block;
}
.dropdown-content {
    margin-left: -20px;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 10px;
  width:100px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:12px;
}

.course{
    padding:10px 110px;
}
.topCourse{
  border:1px solid #dadce0;
  border-radius:5px;
  padding:20px 20px;
}
.createCourse{
    float:right;
    background-color:#4285f4;
    border:1px solid #4285f4;
    border-radius:3px;
    color:white;
    padding:8px 20px;
    font-size:15px;
    cursor: pointer;
}
.course-content{
  margin-top: 20px;
}
.course-content ul{
  padding-inline-start: 0px;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.course-content li{
  border:1px solid #dadce0;
  /* flex-basis: calc(25% - 20px); */
  gap: 10px; /* 在项目之间添加间距 */
  flex-wrap: wrap;
  /* padding: 20px; */
  display: flex;
justify-content: space-between; /* 项目之间的间距均匀分布 */
}
.course-type{
  border: 1px solid #4285f4;
  padding: 0px 3px;
  color: #4285f4;
  font-size: 13px;
}
#course-action{
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
a:hover{
  border: none;
}
.course-sort a {
  color: black;
  padding: 12px 30px 12px 0px;

  width:100px;
  text-decoration: none;
}
.el-button pigeonhole{
 float: right; 
 padding: 20px 15px;
}
.course-sort a:hover{
  color: #4285f4;
}
.active{
  color: #4285f4;
}
.activeArchive{
  color: #4285f4;
  background-color: #e8f0ff;
  border-left: 2px solid #4285f4;
}
.el-collapse-item button{
  font-size: medium;
  border: none;
}
.courseLearn-content ul{
  padding-inline-start: 0px;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.courseLearn-content li{
  border:1px solid #dadce0;
  /* flex-basis: calc(25% - 20px); */
  gap: 10px; /* 在项目之间添加间距 */
  flex-wrap: wrap;
  /* padding: 20px; */
  display: flex;
justify-content: space-between; /* 项目之间的间距均匀分布 */
}
</style>